<template>
    <ContentWrap>
        <CardTitle title="SummaryCard 使用" />
        <code class="code-block mt-20px" >
            &lt;SummaryCard title="用户总数" :value="1200" icon="ep:user" /&gt;<br/>
            &lt;SummaryCard title="销售额" :value="580000" prefix="¥" suffix="元" /&gt;<br/>
            &lt;SummaryCard title="增长率" :value="15.6" suffix="%" :trend="true" /&gt;
        </code>
        <CardTitle title="SummaryCard 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
import { ref } from 'vue'

const userCount = ref(1200)
const sales = ref(580000)
const growthRate = ref(15.6)

&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="SummaryCard 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>title</td>
                    <td>string</td>
                    <td>''</td>
                    <td>标题</td>
                </tr>
                <tr>
                    <td>tooltip</td>
                    <td>string</td>
                    <td>''</td>
                    <td>提示</td>
                </tr>
                <tr>
                    <td>icon</td>
                    <td>string</td>
                    <td>''</td>
                    <td>图标</td>
                </tr>
                <tr>
                    <td>iconColor</td>
                    <td>string</td>
                    <td>''</td>
                    <td>图标颜色</td>
                </tr>
                <tr>
                    <td>iconBgColor</td>
                    <td>string</td>
                    <td>''</td>
                    <td>图标背景颜色</td>
                </tr>
                <tr>
                    <td>prefix</td>
                    <td>string</td>
                    <td>''</td>
                    <td>前缀</td>
                </tr>
                <tr>
                    <td>value</td>
                    <td>number</td>
                    <td>0</td>
                    <td>值</td>
                </tr>
                <tr>
                    <td>decimals</td>
                    <td>number</td>
                    <td>0</td>
                    <td>小数位数</td>
                </tr>
                <tr>
                    <td>percent</td>
                    <td>number</td>
                    <td>undefined</td>
                    <td>百分比</td>
                </tr>
             
            </tbody>
        </table>
        
        <CardTitle title="SummaryCard 示例" />
       <div class="mt-20px">
            <div class="demo-section">
                <h4>基础用法</h4>
                <div class="summary-grid">
                    <SummaryCard 
                        title="总用户数" 
                        :value="userCount" 
                        icon="ep:user"
                        color="#409EFF"
                    />
                    <SummaryCard 
                        title="总订单数" 
                        :value="orderCount" 
                        icon="ep:shopping-cart"
                        color="#67C23A"
                    />
                    <SummaryCard 
                        title="总销售额" 
                        :value="totalSales" 
                        prefix="¥"
                        suffix="元"
                        icon="ep:money"
                        color="#E6A23C"
                    />
                    <SummaryCard 
                        title="增长率" 
                        :value="growthRate" 
                        suffix="%"
                        :trend="true"
                        icon="ep:trend-charts"
                        color="#F56C6C"
                    />
                </div>
            </div>
            
            <div class="demo-section">
                <h4>不同颜色主题</h4>
                <div class="summary-grid">
                    <SummaryCard 
                        title="蓝色主题" 
                        :value="1234" 
                        icon="ep:star"
                        color="#409EFF"
                    />
                    <SummaryCard 
                        title="绿色主题" 
                        :value="5678" 
                        icon="ep:check"
                        color="#67C23A"
                    />
                    <SummaryCard 
                        title="橙色主题" 
                        :value="9012" 
                        icon="ep:warning"
                        color="#E6A23C"
                    />
                    <SummaryCard 
                        title="红色主题" 
                        :value="3456" 
                        icon="ep:close"
                        color="#F56C6C"
                    />
                </div>
            </div>
            
            <div class="demo-section">
                <h4>不同数据格式</h4>
                <div class="summary-grid">
                    <SummaryCard 
                        title="整数" 
                        :value="numberInt" 
                        icon="ep:data-line"
                    />
                    <SummaryCard 
                        title="小数" 
                        :value="numberFloat" 
                        icon="ep:data-analysis"
                    />
                    <SummaryCard 
                        title="百分比" 
                        :value="percentage" 
                        suffix="%"
                        icon="ep:pie-chart"
                    />
                    <SummaryCard 
                        title="货币" 
                        :value="currency" 
                        prefix="$"
                        suffix=" USD"
                        icon="ep:coin"
                    />
                </div>
            </div>
            
            <div class="demo-section">
                <h4>动态数据更新</h4>
                <div class="controls">
                    <EButton @click="updateData">更新数据</EButton>
                    <EButton @click="resetData">重置数据</EButton>
                    <EButton @click="randomData">随机数据</EButton>
                </div>
                <div class="summary-grid">
                    <SummaryCard 
                        title="动态用户数" 
                        :value="dynamicUsers" 
                        icon="ep:user"
                        color="#409EFF"
                    />
                    <SummaryCard 
                        title="动态销售额" 
                        :value="dynamicSales" 
                        prefix="¥"
                        icon="ep:money"
                        color="#67C23A"
                    />
                    <SummaryCard 
                        title="动态增长率" 
                        :value="dynamicGrowth" 
                        suffix="%"
                        :trend="true"
                        icon="ep:trend-charts"
                        color="#E6A23C"
                    />
                </div>
                <p class="demo-result">
                    最后更新时间: {{ lastUpdateTime }}
                </p>
            </div>
            
            <div class="demo-section">
                <h4>大数字格式化</h4>
                <div class="summary-grid">
                    <SummaryCard 
                        title="百万级" 
                        :value="1234567" 
                        icon="ep:data-board"
                        color="#409EFF"
                    />
                    <SummaryCard 
                        title="十万级" 
                        :value="567890" 
                        icon="ep:histogram"
                        color="#67C23A"
                    />
                    <SummaryCard 
                        title="千级" 
                        :value="12345" 
                        icon="ep:data-line"
                        color="#E6A23C"
                    />
                    <SummaryCard 
                        title="小数精度" 
                        :value="123.456789" 
                        icon="ep:monitor"
                        color="#F56C6C"
                    />
                </div>
            </div>
            
            <div class="demo-section">
                <h4>无图标样式</h4>
                <div class="summary-grid">
                    <SummaryCard 
                        title="简洁样式1" 
                        :value="simpleValue1" 
                        color="#409EFF"
                    />
                    <SummaryCard 
                        title="简洁样式2" 
                        :value="simpleValue2" 
                        suffix=" 次"
                        color="#67C23A"
                    />
                    <SummaryCard 
                        title="简洁样式3" 
                        :value="simpleValue3" 
                        prefix="¥"
                        color="#E6A23C"
                    />
                </div>
            </div>
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 基础数据
const userCount = ref(12580)
const orderCount = ref(8930)
const totalSales = ref(1250000)
const growthRate = ref(25.6)

// 不同格式数据
const numberInt = ref(42)
const numberFloat = ref(3.14159)
const percentage = ref(68.5)
const currency = ref(1234.56)

// 动态数据
const dynamicUsers = ref(1000)
const dynamicSales = ref(50000)
const dynamicGrowth = ref(12.5)
const lastUpdateTime = ref('')

// 简洁样式数据
const simpleValue1 = ref(999)
const simpleValue2 = ref(1288)
const simpleValue3 = ref(88888)

const updateData = () => {
    dynamicUsers.value += Math.floor(Math.random() * 100)
    dynamicSales.value += Math.floor(Math.random() * 10000)
    dynamicGrowth.value = Math.round((Math.random() * 20 + 5) * 100) / 100
    lastUpdateTime.value = new Date().toLocaleString()
}

const resetData = () => {
    dynamicUsers.value = 1000
    dynamicSales.value = 50000
    dynamicGrowth.value = 12.5
    lastUpdateTime.value = new Date().toLocaleString()
}

const randomData = () => {
    dynamicUsers.value = Math.floor(Math.random() * 50000) + 1000
    dynamicSales.value = Math.floor(Math.random() * 1000000) + 10000
    dynamicGrowth.value = Math.round((Math.random() * 100 - 10) * 100) / 100
    lastUpdateTime.value = new Date().toLocaleString()
}

// 初始化更新时间
lastUpdateTime.value = new Date().toLocaleString()
</script>

<style lang="scss" scoped>
.demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
    
    h4 {
        margin: 0 0 15px 0;
        color: #333;
        font-size: 16px;
    }
    
    .demo-result {
        margin: 15px 0 0 0;
        color: #666;
        font-size: 14px;
        font-family: monospace;
    }
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
</style> 